
import React from "react";
import { useEffect } from "react";
import { EditorEnvContextProvider } from "./EditorEnvContext";
import EditorEnvironment from '../dodoco/editor/EditorEnvironment';

const _EDITOR_ENVIRONMENT = new EditorEnvironment();

import EditorSceneView from "./EditorSceneView";

import './Editor.css';
import EditorViewportHook, { getEditorViewport } from "./EditorViewportHook";
import { UI_MENU_BAR_HEIGHT } from "./Config";

function EditorContent({ children }) {
    const {width, height} = getEditorViewport();
    return (
        <div className="EditorContent" style={{height: height - UI_MENU_BAR_HEIGHT}}>
            {children}
        </div>
    )
}

export default function () {
    
    useEffect(() => {    
        const handleKeyboardEvent = (e: KeyboardEvent, state: number) => {
            _EDITOR_ENVIRONMENT.onKeyboardEvent(e, state);
        }

        const handleKeyDown = (e) => handleKeyboardEvent(e, 1);
        const handleKeyUp = (e) => handleKeyboardEvent(e, 0);
        
        window.addEventListener('keydown', handleKeyDown);
        window.addEventListener('keyup', handleKeyUp);

        _EDITOR_ENVIRONMENT.onEditorViewportChange(window.innerWidth, window.innerHeight);

        return () => {
            window.removeEventListener('keydown', handleKeyDown);
            window.removeEventListener('keyup', handleKeyUp);
        }
    });

    return (
        <EditorEnvContextProvider env={_EDITOR_ENVIRONMENT}> 
            <EditorViewportHook>
                <EditorContent>
                    <EditorSceneView/>
                </EditorContent>
            </EditorViewportHook>
        </EditorEnvContextProvider>
    );
}
